<template>
  <div>
    <h3>03- 为 ref() 标注类型</h3>

    <h4>标题：{{ title }}</h4>
    <button @click="handleClick">修改标题</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, type Ref } from "vue";
// 自动类型推导
const title = ref("我是标题");
const year: Ref<string | number> = ref("2020");
const year1 = ref<string | number>("2020");
year.value = 2024;
year1.value = 2024;
function handleClick() {
  //   title.value = 123; // 这里会报错，因为 title 是 string 类型
  title.value = "hello";
}

const book = reactive({ title: "Vue 3 指引", price: 99 });

// book.price = "123"; // 这里会报错，因为 根据类型推导 price 是 number 类型
book.price = 123;

interface Book {
  title: string;
  year: number;
}
const book1: Book = reactive<Book>({ title: "Vue 3 指引", year: 2020 });
</script>
